<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类</title>
    <link rel="stylesheet" href="./css/fixclear.css">
    <link rel="stylesheet" href="./icon/iconfont.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/classify.css">
</head>

<body>
    <!-- 搜索栏 -->
    <div class="header">
        <a href="./index.html"><div class="back">back</div>
        </a>
        <div class="title">分类</div>
        <div class="city">
            <select name="" id="">
                <option value="">深圳市</option>
                <option value="" selected>广州市</option>
                <option value="">佛山市</option>
                <option value="">湛江市</option>
            </select>
            <i class="iconfont icon-xiajiantou"></i>
        </div>
    </div>
    <!--内容上 -->
    <div class="mainTop">
        <div class="topbox"><img src="./img/分类/图层1@2x.png" alt="">
            <h2>美食</h2>
        </div>
        <div class="topbox"><img src="./img/分类/图层3@2x.png" alt="">
            <h2>电影</h2>
        </div>
        <div class="topbox"><img src="./img/分类/图层4@2x.png" alt="">
            <h2>运动</h2>
        </div>
        <div class="topbox"><img src="./img/分类/图层5@2x.png" alt="">
            <h2>唱歌</h2>
        </div>
    </div>
    <!--四个点 -->
    <div class="circle">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <!-- 美食横幅栏 -->
    <div class="banner">
        <div class="bannerLef"><i class="iconfont icon-jinkoubinggangaodian"></i>
            <h3>美食类</h3>
        </div>
        <div class="bannerRig">更多<i class="iconfont icon-jiantou"></i></div>
    </div>
    <!-- 美食图片排布 -->
    <div class="conPic">
        <div><img src="./img/分类/图层10@2x.png" alt=""></div>
        <div><img src="./img/分类/图层11@2x.png" alt=""></div>
        <div><img src="./img/分类/图层12@2x.png" alt=""></div>
        <div><img src="./img/分类/图层13@2x.png" alt=""></div>
    </div>
    <!-- 运动横幅栏 -->
    <div class="banner">
        <div class="bannerLef"><i class="iconfont icon-tiyu-gaoerfuqiu"></i>
            <h3>运动类</h3>
        </div>
        <div class="bannerRig">更多<i class="iconfont icon-jiantou"></i></div>
    </div>
    <!-- 运动图片排布 -->
    <div class="conPic">
        <div><img src="./img/分类/图层14@2x.png" alt=""></div>
        <div><img src="./img/分类/图层15@2x.png" alt=""></div>
        <div><img src="./img/分类/图层16@2x.png" alt=""></div>
        <div><img src="./img/分类/图层17@2x.png" alt=""></div>
    </div>
    <!-- 电影横幅栏 -->
    <div class="banner">
        <div class="bannerLef"><i class="iconfont icon-dianying"></i>
            <h3>电影类</h3>
        </div>
        <div class="bannerRig">更多<i class="iconfont icon-jiantou"></i></div>
    </div>
    <!-- 电影图片排布 -->
    <div class="conPic">
        <div><img src="./img/分类/图层18@2x.png" alt=""></div>
        <div><img src="./img/分类/图层19@2x.png" alt=""></div>
        <div><img src="./img/分类/图层18@2x.png" alt=""></div>
        <div><img src="./img/分类/图层19@2x.png" alt=""></div>
    </div>
    <!-- 底部空白栏 -->
    <div class="blank" style="    padding-bottom: 16vw;"></div>
    <!-- foot -->
    <div class="footer">
        <div class="footCon">
            <a href="./index.html"><i class="iconfont icon-31shouye"> </i>
            <p>首页</p></a>
        </div>
        <div class="footCon">
            <a href="./classify.html"><i class="iconfont icon-fenleiorguangchangorqitatianchong"> </i>
            <p>分类</p></a>
        </div>
        <div class="footCon">
            <a href="./discover.html"><i class="iconfont icon-faxian"> </i>
            <p>发现</p></a>
        </div>
        <div class="footCon">
            <a href="./mine.html"><i class="iconfont icon-wode1"> </i>
            <p>我的</p></a>
        </div>
    </div>
</body>

</html>